<template>
	<view class="container">
		<view class="search">
			<u-search placeholder="搜索课程" v-model="keyword" @search="handleSearch" @custom="handleSearch"></u-search>
		</view>
		<u-line></u-line>

		<view class="searchHistory" v-if="showHistory">

			<view class="top">
				<u-text text="搜索历史" bold="true" size="18"></u-text>
				<u-text class="deleteHistory" style="justify-content: flex-end;" text="清空历史" type="info"
					@click="clearHistory"></u-text>
			</view>

			<view class="history-tags">
				<u-tag v-for="(item, index) in searchHistory" :key="index" :text="item" type="info" plain shape="circle"
					@click="selectHistory(item)" class="tag-item"></u-tag>
			</view>

		</view>

		<view class="hot-search">
			<view class="top">
				<u-text text="热搜词" bold="true" size="18"></u-text>
			</view>
			<view class="hot-tags">
				<u-tag text="物理" type="error" plain shape="circle" @click="selectHotWord('物理')"
					class="tag-item"></u-tag>
				<u-tag text="英语课程" type="error" plain shape="circle" @click="selectHotWord('英语课程')"
					class="tag-item"></u-tag>
			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				showHistory: true,
				searchHistory: ['研学', '物理实验', '英语口语'],
				searchResults: [{
						title: '物理基础课程',
						desc: '涵盖力学、热学、电磁学等基础知识'
					},
					{
						title: '物理实验教程',
						desc: '20个经典物理实验详解'
					},
					{
						title: '物理竞赛辅导',
						desc: '针对物理竞赛的系统培训'
					}
				]
			}
		},
		methods: {
			handleSearch() {
				if (this.keyword.trim() === '') return;

				// 添加到搜索历史
				if (!this.searchHistory.includes(this.keyword)) {
					this.searchHistory.unshift(this.keyword);
					// 限制历史记录数量
					if (this.searchHistory.length > 5) {
						this.searchHistory.pop();
					}
				}

				// 显示搜索结果
				this.showHistory = false;
				uni.navigateTo({
					url: '/pages/index/hotCourse/searchResult'
				})
				// 这里实际应该调用搜索API
				// this.fetchSearchResults();
			},

			selectHistory(keyword) {
				this.keyword = keyword;
				this.handleSearch();
			},

			selectHotWord(keyword) {
				this.keyword = keyword;
				this.handleSearch();
			},

			clearHistory() {
				uni.showModal({
					title: '提示',
					content: '确定要清空搜索历史吗？',
					success: (res) => {
						if (res.confirm) {
							this.searchHistory = [];
							this.showHistory = false
						}
					}
				});
			},

			cancelSearch() {
				this.showHistory = true;
				this.keyword = '';
			},

			fetchSearchResults() {
				// 这里应该是调用API获取搜索结果
				// 模拟数据
				this.searchResults = [{
						title: this.keyword + '基础课程',
						desc: '涵盖' + this.keyword + '基础知识'
					},
					{
						title: this.keyword + '进阶教程',
						desc: '深入讲解' + this.keyword + '高级内容'
					},
					{
						title: this.keyword + '实战训练',
						desc: this.keyword + '实际应用案例'
					}
				];
			}
		}
	}
</script>

<style lang="scss">
	.container {
		overflow: hidden;
		background: #fff;
		font-size: 14px;
		height: 100vh;
	}

	.search {
		padding: 15px;
	}

	.searchHistory,
	.hot-search {
		padding: 15px;
		padding-top: 20px;

		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 15px;

			.deleteHistory {
				justify-content: flex-end;

			}

		}
	}

	.history-tags,
	.hot-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10px;
	}

	.tag-item {
		margin-right: 10px;
		margin-bottom: 10px;
	}

	.search-results {
		padding: 15px;

		.result-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.right {}
		}

		.course-item {
			padding: 12px 0;
			border-bottom: 1px solid #f5f5f5;

			&:last-child {
				border-bottom: none;
			}
		}
	}
</style>